<template>
    <div class="user-page" id="user-page">
        <search-sub></search-sub>
        <section class="tab-wrap">
            <section class="main">
                <ol class="tab-con right-wrap flex" v-if="matched[1].name == 'order'">
                    <li v-for="(item, index) in tabList" :key="index" :class="[tabType == item.type ? 'act' : '']" @click="switchTab(item.type)">
                        {{ item.name }}
                    </li>
                </ol>
                <ol class="tab-con right-wrap flex" v-else-if="matched[1].name == 'bill_detail'">
                    <li>
                        我的账单<span class="el-icon-arrow-right"></span>{{ matched[1].meta.title }}
                    </li>
                </ol>
                <ol class="tab-con right-wrap flex" v-else>
                    <li>{{ matched[1].meta.title }}</li>
                </ol>
            </section>

        </section>
        <div class="main flex">
            <div class="left-wrap">
                <h1>全部功能</h1>
                <ul>
                    <li v-for="(item, index) in leftNavList" :key="index" :class="{ active: activeNavIndex === index }">
                        <router-link :to="item.path" class="nav-link">{{
                            item.name
                        }}</router-link>
                    </li>
                </ul>
            </div>
            <div class="right-wrap">
                <router-view :tabType="tabType" @getTabType="getTabType" ref="childPage"></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import SearchSub from "@/components/SearchSub.vue";
export default {
    components: {
        SearchSub,
    },
    data() {
        return {
            tabList: [
                {
                    name: '全部',
                    type: 'all'
                },
                {
                    name: '待审核',
                    type: 'audit'
                },
                {
                    name: '待配送',
                    type: 'delivery'
                },
                {
                    name: '配送中',
                    type: 'delivery_in'
                },
                {
                    name: '已完成',
                    type: 'received'
                },
            ],
            leftNavList: [
                {
                    name: "我的订单",
                    path: "/user/order/all",
                },
                {
                    name: "我的账单",
                    path: "/user/bill",
                },
                {
                    name: "收货地址",
                    path: "/user/address",
                },
                {
                    name: "我的收藏",
                    path: '/user/collect',
                    type: 1,
                },
                {
                    name: "我的足迹",
                    path: "/user/foot",
                    type: 2,
                },
                {
                    name: "找货服务",
                    path: "/user/search_goods",
                },
                {
                    name: "金融服务",
                    path: "/user/finance",
                },
                {
                    name: "企业认证",
                    path: "/user/enterprise_auth",
                },
            ],
            activeNavIndex: 0,
            matched: [],
            tabType: 'all',
            pageType: 1,
        };
    },
    watch: {
        $route() {
            this.getBreadcrumb();
            this.setActiveNav();
        },
    },
    created() {
        this.getBreadcrumb();
        this.setActiveNav();
    },
    methods: {
        getTabType(type) {
            this.tabType = type;
        },
        getBreadcrumb() {
            this.matched = this.$route.matched.filter(
                (item) => item.meta && item.meta.title
            );
        },
        setActiveNav() {
            this.activeNavIndex = this.$route.meta.navIndex || 0;
        },
        switchTab(type) {
            this.tabType = type;
        },
    },
};
</script>
<style>
</style>
<style lang="scss" scoped>
$supplier-color: #30b30e;
::v-deep .el-loading-mask {
    height: calc(100vh - 303px) !important;
}
.user-page {
    min-height: 100%;
    background: #f7f9fa;
}
.active {
    color: #ff6000;
    font-weight: bold;
    a {
        color: #ff6000 !important;
    }
}

.tab-wrap {
    width: 100%;
    height: 44px;
    background-color: $supplier-color;

    .tab-con {
        // width: 1000px;
        height: 44px;
        margin-left: 142px;
        align-items: center;
        // padding: 0 12px;
        box-sizing: border-box;
        li {
            font-size: 16px;
            color: #fff;
            margin-right: 42px;
            cursor: pointer;
            font-weight: bold;
        }
        .act {
            position: relative;
            &:after {
                content: "";
                width: 30px;
                height: 4px;
                background: #fff;
                border-radius: 2px;
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                bottom: -5px;
            }
        }
    }
}

.main {
    width: 1206px;
    margin: auto;
}

.left-wrap {
    width: 130px;
    height: 344px;
    background: #ffffff;
    padding: 30px 0 0 18px;
    box-sizing: border-box;
    margin-right: 12px;

    h1 {
        font-size: 18px;
        color: #ff6000;
        padding-bottom: 20px;
    }

    ul li {
        font-size: 14px;
        margin-bottom: 16px;
        cursor: pointer;

        &:last-of-type {
            margin-bottom: 0;
        }
    }

    .nav-link {
        color: #333;
    }

    .li-act {
        color: #ff6000;
    }
}

.right-wrap {
    width: 1050px;
}
@media screen and (max-width: 1280px) {
    .main {
        width: 924px;
        margin: auto;
    }
    .right-wrap {
        width: 782px;
    }
    .tab-con {
        // width: 762px !important;
    }
}
</style>
